<template>
	<h4 class="title_lv2"></h4>
	<div class="show_link">
		<a href="https://element-plus.org/zh-CN/component/tree.html" target="_blank">https://element-plus.org/zh-CN/component/tree.html</a>
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">基础用法</span>
		<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">可选择-本例还展示了动态加载节点数据的方法。</span>
		<el-tree
		    :props="props"
		    :load="loadNode"
		    lazy
		    show-checkbox
		    @check-change="handleCheckChange"
		  />
	</div>
	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
		<pre><code class="language-js">{{ htmlCode }} </code></pre>
	</dropWrap>
	<!-- 页面代码 源码 -->

</template>

<script lang="ts" setup>
	import { reactive,ref, onMounted, nextTick } from "vue";
	import dropWrap from "../dropWrap.vue";
	import Prism from "prismjs";

	interface Tree {
	  label: string
	  children?: Tree[]
	}
	
	const handleNodeClick = (data: Tree) => {
	  console.log(data)
	}
	
	const data: Tree[] = [
	  {
	    label: 'Level one 1',
	    children: [
	      {
	        label: 'Level two 1-1',
	        children: [
	          {
	            label: 'Level three 1-1-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    label: 'Level one 2',
	    children: [
	      {
	        label: 'Level two 2-1',
	        children: [
	          {
	            label: 'Level three 2-1-1',
	          },
	        ],
	      },
	      {
	        label: 'Level two 2-2',
	        children: [
	          {
	            label: 'Level three 2-2-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    label: 'Level one 3',
	    children: [
	      {
	        label: 'Level two 3-1',
	        children: [
	          {
	            label: 'Level three 3-1-1',
	          },
	        ],
	      },
	      {
	        label: 'Level two 3-2',
	        children: [
	          {
	            label: 'Level three 3-2-1',
	          },
	        ],
	      },
	    ],
	  },
	]
	
	const defaultProps = {
	  children: 'children',
	  label: 'label',
	}
	import type Node from 'element-plus/es/components/tree/src/model/node'
	let count = 1
	
	interface Tree {
	  name: string
	}
	
	const props = {
	  label: 'name',
	  children: 'zones',
	}
	
	const handleCheckChange = (
	  data: Tree,
	  checked: boolean,
	  indeterminate: boolean
	) => {
	  console.log(data, checked, indeterminate)
	}
	
	const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
	  if (node.level === 0) {
	    return resolve([{ name: 'Root1' }, { name: 'Root2' }])
	  }
	  if (node.level > 3) return resolve([])
	
	  let hasChild = false
	  if (node.data.name === 'region1') {
	    hasChild = true
	  } else if (node.data.name === 'region2') {
	    hasChild = false
	  } else {
	    hasChild = Math.random() > 0.5
	  }
	
	  setTimeout(() => {
	    let data: Tree[] = []
	    if (hasChild) {
	      data = [
	        {
	          name: `zone${count++}`,
	        },
	        {
	          name: `zone${count++}`,
	        },
	      ]
	    } else {
	      data = []
	    }
	
	    resolve(data)
	  }, 500)
	}
	let htmlCode = ref<string>(`
		基础用法
		<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
		
		可选择
		<el-tree
		    :props="props"
		    :load="loadNode"
		    lazy
		    show-checkbox
		    @check-change="handleCheckChange"
		  />
	`);

	/*
	生命周期
	*/
	onMounted(() => {
		nextTick(() => {
			Prism.highlightAll();
		});
	});
</script>
<style scoped>
	.slider-demo-block {
		width: 80%;
	}

	.slider-demo-block .el-slider {
		margin-top: 0;
		margin-left: 12px;
	}

	.slider-demo-block .demonstration {
		font-size: 14px;
		color: var(--el-text-color-secondary);
		line-height: 44px;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 0;
	}

	.slider-demo-block .demonstration+.el-slider {
		flex: 0 0 70%;
	}
</style>